<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>06_列表渲染</title>
</head>
<body>

	<!--
1. 列表显示
  数组: v-for / index
  对象: v-for / key
2. 列表的更新显示
  删除item
  替换item
-->

<div id="demo">
	<h2>测试: v-for 遍历数组</h2>
	<ul>
		<li v-for="(person,index) in persons" :key="index">
			{{index}}--{{person.name}}--{{person.age}}--<button @click="deleteP(index)">delete</button>--<button @click="updateP(index,{name:'Cat',age:16})" >update</button>
		</li>
	</ul>
	<h2>测试: v-for 遍历对象</h2>
	<ul>
		<li v-for="(value,key) in persons[3]" :key="key">
			{{key}}:{{value}}
		</li>
	</ul>
</div>
<script src="../js/vue.js"></script>
<script>
	const vm = new Vue({
		el: '#demo',
		data: {
            persons: [
              {name:'Tom',age:26},
              {name:'Jack',age:25},
              {name:'Linda',age:24},
              {name:'Marry',age:23}
            ]
		},
		methods: {
			deleteP: function(index){
				this.persons.splice(index,1);
				//调用了不是原生数组的splice(), 而是一个变异(重写)方法
              // 1. 调用原生的数组的对应方法
              // 2. 更新界面
			},
			updateP: function(index,newP){
				this.persons.splice(index,1,newP);
				 // this.persons[index] = newP  // vue根本就不知道
			}
		}
	})
</script>
</body>
</html>